<script setup>
import { computed, onMounted, reactive, ref, watchEffect } from 'vue';
const formLabelWidth = '150px'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { Decrypt, Encrypt } from '../../untils/passjs/security';
import { AddFeedBack, getRoledata, feedbackSubmitjiedian,editFeedBack, getRoledataList } from '../../api/api';
let formRef = ref(null)
let props = defineProps({
    dialogFormVisible: Boolean,
    formlist: Object,
    changeType: String
})
const datasel = ref([]);
const states = ref([]);
const countryStates = ref({});
let buttontype = ref('')
watchEffect(() => {
    if (props.dialogFormVisible) {
        console.log(props.formlist);
        if (props.changeType == 'add') {
            buttontype.value = 'add'
        } else {
            buttontype.value = 'edit'
        }
    }
})
let emits = defineEmits(["close", 'update:formlist'])
function closedialog(formEl) {
    if (!formEl) return
    emits("close")
}
async function addsubmit(formEl, buttontypeval) {
    buttontype.value = buttontypeval
    if (props.changeType == "add") {
        if (props.formlist.feedbackTitle == '' || props.formlist.feedbackContent == '') {
            ElMessage.warning("Please enter complete user information")
            return;
        }
        console.log(props.formlist, "新增数据");
        if (buttontype.value == 'save') {
            let requestData = {
                feedbackTitle: props.formlist.feedbackTitle,
                feedbackContent: props.formlist.feedbackContent
            }
            try {
                let res = await AddFeedBack(requestData)
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    emits("close")
                }
            } catch (error) {
                console.log(error);
            }
        } else if (buttontype.value == 'Save and Send') {
            let requestData = {
                feedbackTitle: props.formlist.feedbackTitle,
                feedbackContent: props.formlist.feedbackContent
            }
            try {
                let res = await AddFeedBack(requestData)
                if (res.code == 200) {
                    console.log(res.data);
                    let requestDatasubmit = {
                        documentId: res.data,
                        nodeStatus: 6,
                        leaveWord: ""
                    }
                    console.log(requestDatasubmit);
                    let submitjiedian = await feedbackSubmitjiedian(requestDatasubmit)
                    console.log(submitjiedian);
                    if(submitjiedian.code == 200){
                         emits("close")
                         ElMessage.success(submitjiedian.msg)
                    }
                }
            } catch (error) {
                console.log(error);
            }
        }
    } else if (props.changeType == "update") {
        if (props.formlist.feedbackTitle == '' || props.formlist.feedbackContent == '') {
            ElMessage.warning("Please enter complete user information")
            return;
        }
        if (buttontype.value == 'save') {
            let requestData = {
                feedbackId: props.formlist.feedbackId,
                feedbackTitle: props.formlist.feedbackTitle,
                feedbackContent: props.formlist.feedbackContent
            }
            try {
                let res = await editFeedBack(requestData)
                if (res.code == 200) {
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    emits("close")
                }
            } catch (error) {
                console.log(error);
            }
        } else if (buttontype.value == 'Save and Send') {
             let requestData = {
                feedbackId: props.formlist.feedbackId,
                feedbackTitle: props.formlist.feedbackTitle,
                feedbackContent: props.formlist.feedbackContent
            }
            try {
                let res = await editFeedBack(requestData)
                if (res.code == 200) {
                    let requestDatasubmit = {
                        documentId: res.data,
                        nodeStatus: 6,
                        leaveWord: ""
                    }
                    console.log(requestDatasubmit);
                    let submitjiedian = await feedbackSubmitjiedian(requestDatasubmit)
                    console.log(submitjiedian);
                    if(submitjiedian.code == 200){
                         emits("close")
                         ElMessage.success(submitjiedian.msg)
                    }
                }
            } catch (error) {
                console.log(error);
            }
            
        }
    }
}
let feedbackrule = ref({
    feedbackTitle: [
        {
            required: true,
            message: 'Please enter the Feedback Title',
            trigger: 'blur'
        }
    ],
    feedbackContent: [
        {
            required: true,
            message: 'Please enter feedbackContent',
            trigger: 'blur'
        }
    ],
})
function colseclose(formRef) {
    emits("close")
}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="dialogFormVisible" style="padding: 40px;width: 800px;"
            :title="changeType == 'add' ? 'Add' : 'edit'" @close="colseclose">
            <el-form :model="formlist" ref="formRef" class="two-column-form" :rules="feedbackrule">
                <!-- 反馈标题 -->
                <el-form-item label="title" :label-width="formLabelWidth" prop="feedbackTitle">
                    <el-input v-model="formlist.feedbackTitle" placeholder="Please enter the Feedback Title"
                        style="width: 220px;" />
                </el-form-item>
                <!-- 反馈内容 -->
                <el-form-item label="feedbackContent" :label-width="formLabelWidth" prop="feedbackContent">
                    <el-input v-model="formlist.feedbackContent" style="width: 500px;" size="large" maxlength="500"
                        placeholder="Please enter feedbackContent" show-word-limit type="textarea" :rows="10" />
                    <span style="position: absolute;right: 80px;bottom: -30px;">Up to 500 words can be entered</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer" style="margin-top: 20px;">
                    <el-button @click="colseclose">cancel</el-button>
                    <!-- <el-button type="primary" @click="addsubmit(formRef)">
                        {{ changeType == "add" ? 'add' : 'edit' }}
                    </el-button> -->
                    <el-dropdown style="cursor: pointer;background-color: #fff;border: 0;margin: 0 5px;">
                        <el-button type="primary">{{ buttontype }}</el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="addsubmit(formRef, 'save')">save</el-dropdown-item>
                                <el-dropdown-item @click="addsubmit(formRef, 'Save and Send')">Save and Send</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
.two-column-form .form-row {
    display: flex;
    justify-content: space-between;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    text-align: right;
    // padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;

        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>